<!-- eslint-disable vue/require-valid-default-prop -->
<script setup>
import * as dayjs from 'dayjs'
import { onLineOrderStatus, offLineOrderStatus } from '@/utils/config'
defineProps({
  showBtn: { type: Boolean, default: false },
  list: { type: Object, default: {} },
  typeId: { type: Number, default: 1 }
})
const emit = defineEmits(['submit'])
const onSubmit = (e, type) => {
  emit('submit', { list: e, type })
}
</script>
<template>
  <div class="v-order-module">
    <div class="v-order-between">
      <span> {{ list.consultProjectName }}</span>
      <slot
        ><span class="v-order-status">{{
          typeId === 1
            ? onLineOrderStatus[list.orderStatus].text
            : offLineOrderStatus[list.orderStatus].text
        }}</span></slot
      >
    </div>
    <div class="v-order-padding" v-if="showBtn"></div>
    <div class="v-date">
      {{ dayjs(list.createTime).format('YYYY-MM-DD HH:mm:ss') }}
    </div>
    <div class="van-hairline--top"></div>
    <div class="v-order-between v-order-padding">
      就诊人&nbsp;&nbsp;&nbsp;&nbsp;{{ list.patientName
      }}<span class="v-money-icon">{{ list.orderAmount }}</span>
    </div>
    <div class="v-order-padding">
      接诊医生&nbsp;&nbsp;<span>{{ list.nutritionistName }}</span>
    </div>
    <div class="v-order-padding">
      所属项目&nbsp;&nbsp;<span>{{ list.projectName }}</span>
    </div>
    <div
      class="van-hairline--bottom"
      v-show="
        showBtn &&
        (list.orderStatus === 0 ||
          list.orderStatus === 2 ||
          list.orderStatus === 3 ||
          list.orderStatus === 7 ||
          list.orderStatus === 8)
      "
    ></div>
    <div class="v-order-between v-order-bottom v-order-padding" v-if="showBtn">
      <span v-if="list.orderStatus === 0" @click="onSubmit(list, 2)"
        >取消订单</span
      >

      <span
        v-if="
          (list.orderStatus === 7 && typeId === 1) ||
          (list.orderStatus === 8 && typeId === 2)
        "
        @click="onSubmit(list, 4)"
        >删除订单</span
      >
      <span
        v-if="list.orderStatus === 2 || list.orderStatus === 3"
        @click="onSubmit(list, 3)"
        >申请退款</span
      >
      <span
        v-if="
          (list.orderStatus === 7 && typeId === 1) ||
          (list.orderStatus === 8 && typeId === 2)
        "
        @click="onSubmit(list, 5)"
        >立即评价</span
      >
      <span @click="onSubmit(list, 5)">立即评价</span>
      <span
        v-if="list.orderStatus === 0"
        class="v-order-bottom-active"
        @click="onSubmit(list, 1)"
        >立即支付</span
      >
    </div>
  </div>
</template>
<style lang="scss" scoped>
.v-order-module {
  margin: 12px;
  padding: 20px 12px 15px;
  background: #ffffff;
  border-radius: 8px;
  .v-order-between {
    display: flex;
    justify-content: space-between;
    .v-order-status {
      color: #357efe;
    }
  }
  .v-order-padding {
    padding-top: 10px;
    color: #4b4e57;
    font-size: 15px;
  }
  .v-date {
    padding-bottom: 10px;
  }
  .van-hairline--bottom {
    padding-top: 12px;
  }
  .v-order-bottom {
    justify-content: flex-end;
    flex-wrap: wrap;
    span {
      padding: 6px 14px;
      margin: 3px 0 0 10px;
      font-size: 14px;
      border: 1px solid #848484;
      border-radius: 15px;
    }
    .v-order-bottom-active {
      color: #357efe;
      border-color: #357efe;
    }
  }
}
</style>
